<template>
  <div>
    <el-row :gutter="10">
      <el-col
        :span="2"
        style="position:absolute; padding-top:20px;padding-left:30px;">
            <el-button type="primary" plain icon="el-icon-arrow-left">返回</el-button>
      </el-col>
      <el-col :span="20" style="position:relative;left:150px;top:10px;">
        <div>
          <h3>分配任务</h3>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 表单 -->
    <el-row style="margin-top:50px;">
        <el-col :span="18" :offset="1">
            <el-form ref="formRef" :model="taskForm" label-width="80px" :rules="formRules">
                <el-form-item label="任务描述" prop="task">
                  <el-input type="textarea" v-model="taskForm.task" rows="4"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="start">
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="yy-mm-dd" v-model="taskForm.start.date" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col :span="12" :offset="1">
                      <el-time-picker placeholder="hh:mm:ss" v-model="taskForm.start.time" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间" prop="end">
                    <el-col :span="11">
                      <el-date-picker type="date" placeholder="yy-mm-dd" v-model="taskForm.end.date" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col :span="12" :offset="1">
                      <el-time-picker placeholder="hh:mm:ss" v-model="taskForm.end.time" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="分配任务" prop="executors">
                  <el-select v-model="taskForm.executors"  multiple  placeholder="请选择">
                    <el-option v-for="(item,index) in employeeList" :key="index" :label="item.name" :value="item.Id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submit">立即分配</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import {getEmployeeList} from '@/api/employee'
import {giveTasks} from '@/api/performance'
  export default {
    data() {
      return {
        taskForm: {
          task:'',
          start:{
              date:"",
              time:''
          },
          end:{
              date:"",
              time:""
          },
          executors:[],
        },
        employeeList:[],
        formRules: {
          task: [
            { required: true, message: '请输入任务', trigger: 'blur' },
          ],
          start: [
            { required: true, message: '请填写开始时间', trigger: 'change' }
          ],
          end: [
            { required: true, message: '请填写结束时间', trigger: 'change' }
          ],
          executors:[
            { required: true, message: "请填写执行人员", trigger: 'change' }
          ],
        }
      }
    },
    mounted(){
        this.getEmployeeList()
    },
    methods: {
      //获取员工列表
      async getEmployeeList(){
          const res = await getEmployeeList()
          if(res.code===200){
              this.employeeList=res.data.employeeList
          }
      },
      submit() {
        this.$refs.formRef.validate(async valid=>{
            if(!valid) return
            const res=await giveTasks(this.taskForm)
            if(res.code===200){
                this.$message.success(res.data.msg)
            }
        })
      },
      //重置表单
      reset(){
          this.$refs.formRef.resetFields();
      }
    }
  }
</script>